<template>
  <div class="paBox">
    <div class="backTop" @click="backTop"><span>返回顶部</span></div>
    <div class="backTop" @click="closeFk"><span>问题反馈</span></div>
    <div class="backTop" @click="closeJy"><span>提个建议</span></div>
  </div>
  <div class="fk" v-show="isFk">
    <div class="formBack">
      <svg @click="closeFk"  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
      </svg>
      <span class="fkTitle">问题反馈</span>
      <textarea v-model.trim="list.fk.bug" class="commentInput errorShow" type="text" placeholder="请在这里描述一下遇到的问题,感谢!"></textarea>
      <div class="butBox">
        <button type="button" class="commentUpButton fontHt" @click="tjfk">添加</button>
      </div>
      <div class="tipMsg" v-show="tipIndex" :class="{red:tip === '服务器娘错误！添加失败！' || tip === '请输入内容'}">{{tip}}</div>
    </div>
  </div>
  <div class="fk" v-show="isJy">
    <div class="formBack">
      <svg @click="closeJy"  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
      </svg>
      <span class="fkTitle">提个建议</span>
      <textarea v-model.trim="list.jy.jy" class="commentInput errorShow" type="text" placeholder="请在这里描述一下遇到的问题,感谢!"></textarea>
      <div class="butBox">
        <button type="button" class="commentUpButton fontHt" @click="tjjy">添加</button>
      </div>
      <div class="tipMsg" v-show="tipIndex" :class="{red:tip === '服务器娘错误！添加失败！' || tip === '请输入内容'}">{{tip}}</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import API from "@/api/AxiosConfig";

const list = reactive({
  // years: [],
  fk: {
    bug:''
  },
  jy:{
    jy:''
  }
})
const isFk = ref(false)
const isJy = ref(false)
const tip = ref(null)
const tipIndex = ref(false)
onMounted(() => {
  setTimeout(() => {
    backTop()
  },150)
})
function tjfk() {
  if (list.fk.bug !== '' && list.fk.bug !== null && list.fk.bug !== undefined){
    API({ url: '/api/fkInsert', method: 'post' ,data:list.fk}).then(res => {
      tip.value = res.data
      ts()
    }).catch(err => {

    })
  }
  tip.value = '请输入内容'
  ts()
}
function tjjy() {
  if (list.jy.jy !== '' && list.jy.jy !== null && list.jy.jy !== undefined) {
    API({url: '/api/jyInsert', method: 'post', data: list.jy}).then(res => {
      tip.value = res.data
      ts()
    }).catch(err => {

    })
  }else {
    tip.value = '请输入内容'
    ts()
  }
}
function ts()  {
  tipIndex.value = true
  setTimeout(() =>{
    tipIndex.value = false
  },3000)
}
function backTop(){
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0
}
function closeFk() {
  isFk.value = !isFk.value
}
function closeJy() {
  isJy.value = !isJy.value
}
</script>

<style lang="less" scoped>
.tipMsg{
  padding: 4px 10px;
  background-color: #a0ccff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  position: absolute;
  top: 0;
  left: 37%;
  color: #FFFFFF;
}
.butBox{
  display: flex;
  justify-content: center;
}
.red{
  background-color: deeppink;
}
.commentUpButton{
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #2d8cf0;
  margin-top: 15px;
}
.bi-x-lg{
  position: absolute;
  right: 20px;
  top: 20px;
}
.fkTitle{
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 350px;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  background: #F1F2F3;
  font-family: 黑体;
  font-weight: bold;
}
.errorShow{
  height: 100px;
}
.formBack{
  position: relative;
  background-color: #FFFFFF;
  padding: 30px 30px;
  border-radius: 4px;
}
.fk{
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(35, 35, 35, 0.6);
  z-index: 100;
  font-family: 黑体;
  font-weight: bold;
}
.backTop{
  border: 1px solid #E3E5E7;
  border-radius: 6px;
  width: 25px;
  padding: 5px 6px;
  font-size: 12px;
  font-family: 黑体;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 10px;
  background-color: #fff;
}
.backTop:hover{
  color: hotpink;
}
.paBox{
  position: fixed;
  right: 0;
  bottom: 15%;
  z-index: 99;
  padding: 10px 20px;
}
</style>
